<!-- 引入 vue 框架 -->
<script src="vue.js"></script>

<!-- 界面显示 -->
<div id="app">

    <a href="#" @click.prevent="flag ? flag : flag = !flag">登&nbsp;录</a>
    <a href="#" @click.prevent="flag ? flag = !flag : flag">注&nbsp;册</a>
    <br><br>
    <login v-if="flag"></login>
    <register v-else></register>
</div>

<!-- 登录界面模板 -->
<template id="loginTmp">
    <div>
        <table border="1">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" id="password"></td>2305
            </tr>
            <tr>
                <td colspan="2">
                    <button @click="loginFun">登录</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<!-- 注册界面模板 -->
<template id="registerTmp">
    <div>
        <table border="1">
            <tr>
                <td><label for="uname">用户名</label></td>
                <td><input type="text" name="uname" id="uname"></td>
            </tr>
            <tr>
                <td><label for="pwd">密码</label></td>
                <td><input type="password" name="pwd" id="pwd"></td>
            </tr>
            <tr>
                <td><label for="pwd1">确认密码</label></td>
                <td><input type="password" name="pwd1" id="pwd1"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button @click="registerFun">注册</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<!-- 定义脚本 -->
<script>
    // 注册登录组件
    Vue.component("login", {
        // template: '<h2>登录页面</h2>'
        template: "#loginTmp",
        methods: {
            loginFun() {
                console.log("准备登录");
            }
        }
    })

    // 注册注册组件
    Vue.component("register", {
        // template: '<h2>注册页面</h2>'
        template: "#registerTmp",
        methods: {
            registerFun() {
                console.log("信息注册");
            }
        }
    })

    var vue = new Vue({
        el: "#app",
        data: {
            flag: true,
            username: "",
            password: "",
        }
    })
</script>

<!-- 界面样式 -->
<style>

</style>